<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Demo | Ice for JavaScript</title>
    <link rel="icon" type="image/x-icon" href="../../../assets/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../../../assets/common.css" />
    {{#cssDeps}}
    <link rel="stylesheet" type="text/css" href="{{.}}"/>
    {{/cssDeps}}
  </head>
  <body>
    <!-- Header section that contains title and navigation bar -->
    <section id="header">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href="../../../index.html">Ice for JavaScript</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#" id="viewReadme">Readme</a></li>
                    <li><a href="#" id="viewSource">Source</a></li>
                </ul>
            </section>
        </nav>
        <ul class="breadcrumbs">
            <li><a href="../../../index.html">Ice</a></li>
            <li><a href="../../index.html">Demos</a></li>
            <li class="current"><a href="#">Hello</a></li>
        </ul>
    </section>
    <!-- Main section that contains the user interface -->
    <section role="main" id="body">
        <div class="row">
            <div class="large-12 medium-12 columns">
                <form>
                    <div class="row">
                        <div class="small-3 columns">
                            <label class="right inline" for="mode">Mode:</label>
                        </div>
                        <div class="small-9 columns">
                            <select id="mode">
                                <option value="twoway">Twoway</option>
                                <option value="twoway-secure">Twoway Secure</option>
                                <option value="oneway">Oneway</option>
                                <option value="oneway-secure">Oneway Secure</option>
                                <option value="oneway-batch">Oneway Batch</option>
                                <option value="oneway-batch-secure">Oneway Batch Secure</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-3 columns">
                            <label class="right inline">Timeout:</label>
                        </div>
                        <div class="small-9 columns">
                            <div id="timeout" class="noUiSlider"></div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="small-3 columns">
                            <label class="right inline">Delay:</label>
                        </div>
                        <div class="small-9 columns">
                            <div id="delay" class="noUiSlider"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-12 columns">
                            <a href="#" class="button small" id="hello">Hello World!</a>
                            <a href="#" class="button small" id="shutdown">Shutdown</a>
                            <a href="#" class="button disabled small" id="flush">Flush</a>
                        </div>
                    </div>
                    <textarea id="output" class="disabled" readonly></textarea>
                    <div id="progress" class="row hide">
                        <div class="small-12 columns left">
                            <div class="inline left icon"></div>
                            <div class="text">Sending Request...</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Modal dialog to show the client README -->
    <div id="readme-modal" class="reveal-modal medium" data-reveal>
        <div class="contents">
            <h4>Hello Demo Readme</h4>
            <hr/>
            <p>This demo illustrates how to invoke ordinary (twoway) operations, as
            well as how to make oneway, secure, and batched invocations.</p>

            <p>
               To run the demo, first you need to start an Ice hello server from
               another language mapping (Java, C++, C#, or Python). You will also
               need to edit the hello server configuration file config.server to
               uncomment the IceSSL.VerifyPeer=0 property if you want to establish
               a secure connection with the WSS protocol.
            </p>

            <p>You can change the invocation mode using the <strong>"Mode"</strong>
            select box; the default is "Twoway" invocation.</p>

            <p>To send an invocation, click the <strong>"Hello World!"</strong> button,
            to shutdown the server click the <strong>"Shutdown"</strong> button,
            and to flush batch requests click the <strong>"Flush"</strong> button
            (this is only enabled when there are pending requests to flush).</p>

            <p>To test timeouts, you can use the timeout slider to set a timeout
            on the client proxy and the delay slider to set a delayed response in
            the server to cause a timeout.</p>
        </div>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <!-- Modal dialog to show the client source code -->
    <div id="source-modal" class="reveal-modal" data-reveal>
        <a class="close-reveal-modal">&#215;</a>
        <dl class="tabs" data-tab>
            <dt></dt>
            <dd class="active"><a href="#panel2-1">Slice</a></dd>
            <dd><a href="#panel2-2">TypeScript</a></dd>
            <dd><a href="#panel2-3">HTML</a></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel2-1">
                <h6>File: demo/Ice/hello/Hello.ice</h6>
                <pre class="source language-c" data-code="Hello.ice"></pre>
            </div>
            <div class="content" id="panel2-2">
                <h6>File: demo/Ice/hello/Client.ts</h6>
                <pre class="source" data-code="Client.ts"></pre>
            </div>
            <div class="content" id="panel2-3">
                <h6>File: demo/Ice/hello/index.html</h6>
                <pre class="source" data-code="index.html"></pre>
            </div>
        </div>
    </div>
    <!-- Footer section -->
    <section id="footer" class="show-for-medium-up">
        <div class="logo">
            <h4><strong>ZeroC</strong></h4>
        </div>
        <div class="copyright">
            <h6>Copyright &copy; ZeroC, Inc. All rights reserved.</h6>
        </div>
    </section>
    <!-- Common dependencies -->
    {{#jsDeps}}
    <script src="{{.}}"></script>
    {{/jsDeps}}
    <script type="text/javascript" src="../../../assets/common.js"></script>
    <!--
      Scripts used during development, for optimized builds comment
      the following scripts and uncomment es5/browser/Client.min.js
      below
    -->
    <!-- Ice.js (Ice run-time library) -->
    <script type="text/javascript" src="../../../node_modules/ice/lib/Ice.js"></script>
    <!-- main.js (Hello Demo Application Bundle) -->
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        if(["http:", "https:"].indexOf(document.location.protocol) !== -1)
        {
            checkGenerated(["main.js"]);
        }
    </script>
  </body>
</html>
